<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>NewBee商城-注册</title>
    <link rel="stylesheet" th:href="@{mall/css/common.css}">
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
    <style>
        .body_login {
            width: 100%;
            min-height: 100vh;
            vertical-align: baseline;
            word-wrap: break-word;
            color: #282a2d;
            background: #f9f9f9;
            transition: background-color .3s;
            font-size: 14px;
            background: linear-gradient(45deg, var(--bg-color-l), var(--bg-color-r));
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login_center {
            width: 370px;
            height: 450px;
            margin: auto;
            backdrop-filter: blur(8px);
            background-color: rgba(255, 255, 255, .75) !important;
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
            border-radius: 0.525rem;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .login-info-input {
            width: 100%;
            border: none;
            border-bottom: 1px solid rgba(136, 136, 136, .2) !important;
            border-radius: 0;
            padding: 0.375rem 0;
            background: transparent !important;
            transition: .3s;
            box-shadow: none;
            letter-spacing: .025rem;
            font-size: inherit;
            line-height: inherit;
            margin-bottom: 20px;
        }

        .login-info-input:focus {
            border: none;
            border-color: #f1404b !important;
        }

        .submit {
            cursor: pointer;
            width: 100px;
            display: inline-block;
            font-weight: 400;
            color: white;
            text-align: center;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: #f1404b;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .submit:hover {
            background-color: black;
        }

        .login_bottom {
            margin-top: 10px;
        }

        .login_submit {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <script th:inline="javascript">var _ctx = [[@{/}]];</script>
</head>
<body class="body_login">
<div class="login_center" style="">
    <div style="width: 300px;height: 348px;">
        <div class="login_top">
            <div class="left fl" style="font-size: 25px;margin-bottom: 25px;">会员注册</div>
            <div class="clear"></div>
            <div class="under-line center"></div>
        </div>
        <form id="registerForm" onsubmit="return false;" action="##">
            <div class="login_main">
                <div class="login-info"><input class="login-info-input" type="text" name="loginName"
                                               autocomplete="off"
                                               placeholder="请输入你的手机号" id="loginName"/>
                </div>
                <div class="login-info"><input class="login-info-input"
                                               autocomplete="off"
                                               type="password"
                                               name="password"
                                               id="password"
                                               placeholder="请输入你的密码"/>
                </div>
                <div class="login-info"><input class="login-info-input"
                                               type="password"
                                               name="repassword"
                                               id="repassword"
                                               placeholder="请再次输入你的密码"/>
                </div>
                <div class="login-info"><input class="login-info-input" style="width: 58%"
                                               type="text"
                                               name="verifyCode"
                                               id="verifyCode"
                                               placeholder="请输入验证码"/>
                    <img alt="单击图片刷新！" style="top: 8px;position: relative;" th:src="@{/common/captcha}"
                         th:onclick="this.src=_ctx + 'common/captcha?d='+new Date()*1">
                </div>
            </div>
            <div class="login_submit" style="">
                <input class="submit" type="button" onclick="register()" value="注册">
                <input class="submit" type="button" th:onclick="window.location.href=_ctx + '?d='+new Date()*1"
                       value="首页">
            </div>
        </form>
        <div class="login_bottom">
            <small>已有账号? <a th:href="@{/login}" class="signup">登录</a></small>
        </div>
    </div>
</div>
</body>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/admin/dist/js/public.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    //注册按钮onclick事件改为register()即可
    function register() {
        var loginName = $("#loginName").val();
        if (!validPhoneNumber(loginName)) {
            swal('请输入正确的登录名(即手机号)', {
                icon: "error",
            });
            return false;
        }
        var password = $("#password").val();
        if (!validPassword(password)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        var verifyCode = $("#verifyCode").val();
        if (!validLength(verifyCode, 7)) {
            swal('请输入正确的验证码', {
                icon: "error",
            });
            return false;
        }
        //验证
        var params = $("#registerForm").serialize();
        var url = _ctx + 'register';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: params,
            success: function (result) {
                if (result.code == 200) {
                    swal({
                        title: "注册成功",
                        text: "是否跳转至登录页?",
                        icon: "success",
                        buttons: true,
                        dangerMode: true,
                    }).then((flag) => {
                            if (flag) {
                                window.location.href = _ctx + 'login';
                            }
                        }
                    )
                    ;
                } else {
                    swal(result.msg, {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }
</script>
</html>
